<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    @close="$emit('update:visible', false)"
    width="520px"
    destroy-on-close
    class="knowledge-dialog"
    :close-on-click-modal="false"
    :show-close="false"
    @closed="resetForm"
  >
    <div class="dialog-content">
      <div class="dialog-header">
        <div class="header-left">
          <h3>添加知识条目</h3>
          <p>添加新的问答知识到知识库</p>
        </div>
        <div class="header-right">
          <button class="btn-close" @click="$emit('update:visible', false)">
            <i class="el-icon-close"></i>
          </button>
        </div>
      </div>
      
      <el-form 
        ref="formRef"
        :model="knowledgeForm" 
        :rules="rules"
        label-position="top"
        class="knowledge-form"
      >
        <div class="form-block full-width">
          <label class="form-label">
            <span class="label-text">问题</span>
            <span class="label-required">*</span>
          </label>
          <div class="input-wrapper">
            <i class="input-icon el-icon-question"></i>
            <el-input 
              v-model="knowledgeForm.question" 
              type="textarea" 
              :rows="3"
              placeholder="请输入问题内容"
              class="form-textarea"
            />
          </div>
        </div>
        
        <div class="form-block full-width">
          <label class="form-label">
            <span class="label-text">答案</span>
            <span class="label-required">*</span>
          </label>
          <div class="input-wrapper">
            <i class="input-icon el-icon-chat-dot-round"></i>
            <el-input 
              v-model="knowledgeForm.answer" 
              type="textarea" 
              :rows="6"
              placeholder="请输入答案内容"
              class="form-textarea"
            />
          </div>
        </div>
        
        <div class="form-block full-width">
          <div class="switch-wrapper">
            <el-switch v-model="knowledgeForm.serializeAnswer" />
            <div class="switch-label">
              <span class="label-text">向量检索</span>
              <div class="form-tip">
                启用后会为答案内容创建向量索引，可增强搜索效果
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    
    <div class="dialog-footer">
      <button class="btn-cancel" @click="$emit('update:visible', false)">
        取消
      </button>
      <button 
        class="btn-submit" 
        @click="submitForm" 
        :disabled="submitting"
      >
        <i class="el-icon-check"></i>
        {{ submitting ? '提交中...' : '确认添加' }}
      </button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { addKnowledge } from '../../api/knowledge'

defineProps({
  visible: {
    type: Boolean,
    required: true
  }
})

const emit = defineEmits(['update:visible', 'success'])

// 表单引用
const formRef = ref<FormInstance>()
const submitting = ref(false)

// 表单数据
const knowledgeForm = reactive({
  question: '',
  answer: '',
  serializeAnswer: true,
  category: '',
  tags: ''
})

// 表单验证规则
const rules = reactive<FormRules>({
  question: [
    { required: true, message: '请输入问题内容', trigger: 'blur' }
  ],
  answer: [
    { required: true, message: '请输入答案内容', trigger: 'blur' }
  ]
})

// 重置表单
const resetForm = () => {
  knowledgeForm.question = ''
  knowledgeForm.answer = ''
  knowledgeForm.serializeAnswer = true
  knowledgeForm.category = ''
  knowledgeForm.tags = ''
  
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    
    submitting.value = true
    
    await addKnowledge(
      knowledgeForm.question,
      knowledgeForm.answer,
      knowledgeForm.serializeAnswer
    )
    
    ElMessage.success('添加知识条目成功')
    emit('success')
    emit('update:visible', false)
    resetForm()
  } catch (error) {
    console.error('Failed to create knowledge:', error)
    ElMessage.error('添加知识条目失败')
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped lang="scss">
.dialog-content {
  padding: 0;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 20px 15px;
  
  .header-left {
    h3 {
      margin: 0 0 5px;
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
    
    p {
      margin: 0;
      font-size: 14px;
      color: #909399;
    }
  }
  
  .btn-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: #909399;
    
    &:hover {
      color: #606266;
    }
    
    i {
      font-size: 18px;
    }
  }
}

.knowledge-form {
  padding: 0 20px 15px;
  
  .form-block {
    margin-bottom: 20px;
    
    &.full-width {
      width: 100%;
    }
    
    .form-label {
      display: flex;
      align-items: center;
      margin-bottom: 6px;
      
      .label-text {
        font-size: 14px;
        color: #606266;
      }
      
      .label-required {
        margin-left: 4px;
        color: #f56c6c;
      }
    }
    
    .input-wrapper {
      position: relative;
      
      .input-icon {
        position: absolute;
        left: 12px;
        top: 12px;
        color: #c0c4cc;
        z-index: 1;
      }
      
      .form-textarea {
        width: 100%;
        
        :deep(textarea) {
          padding-left: 36px;
          font-size: 14px;
          border-color: #dcdfe6;
          border-radius: 4px;
          
          &:focus {
            outline: none;
            border-color: #409eff;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
          }
        }
      }
    }
    
    .switch-wrapper {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      
      .switch-label {
        .label-text {
          font-size: 14px;
          color: #606266;
        }
        
        .form-tip {
          margin-top: 2px;
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
  
  .btn-cancel {
    padding: 8px 15px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background-color: #ffffff;
    color: #606266;
    font-size: 14px;
    cursor: pointer;
    
    &:hover {
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
  }
  
  .btn-submit {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    background-color: #409eff;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    
    &:hover {
      background-color: #66b1ff;
    }
    
    &:disabled {
      background-color: #a0cfff;
      cursor: not-allowed;
    }
  }
}

.knowledge-dialog {
  :deep(.el-dialog) {
    border-radius: 6px;
    overflow: hidden;
  }
  
  :deep(.el-dialog__body) {
    padding: 0;
  }
  
  :deep(.el-dialog__header) {
    display: none;
  }
  
  :deep(.el-dialog__footer) {
    display: none;
  }
}
</style> 